
<!--<!DOCTYPE html>-->
<!--<html lang="zh-CN">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>药品管理系统 - 药品管理</title>-->
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>-->
<!--    <style>-->
<!--        * {-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            box-sizing: border-box;-->
<!--        }-->
<!--        body {-->
<!--            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;-->
<!--            background-color: #f5f7fa;-->
<!--            color: #606266;-->
<!--        }-->
<!--        .app-container {-->
<!--            min-height: 100vh;-->
<!--            display: flex;-->
<!--            flex-direction: column;-->
<!--        }-->
<!--        .header {-->
<!--            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);-->
<!--            color: white;-->
<!--            padding: 15px 20px;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            justify-content: space-between;-->
<!--        }-->
<!--        .logo-area {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--        }-->
<!--        .logo {-->
<!--            width: 50px;-->
<!--            height: 50px;-->
<!--            margin-right: 15px;-->
<!--            background: rgba(255, 255, 255, 0.2);-->
<!--            border-radius: 50%;-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            justify-content: center;-->
<!--            font-size: 24px;-->
<!--            font-weight: bold;-->
<!--        }-->
<!--        .system-name {-->
<!--            font-size: 22px;-->
<!--            font-weight: bold;-->
<!--        }-->
<!--        .nav-menu {-->
<!--            display: flex;-->
<!--            background-color: #304156;-->
<!--            padding: 0 20px;-->
<!--        }-->
<!--        .nav-item {-->
<!--            padding: 15px 20px;-->
<!--            color: #bfcbd9;-->
<!--            cursor: pointer;-->
<!--            transition: all 0.3s;-->
<!--        }-->
<!--        .nav-item:hover, .nav-item.active {-->
<!--            color: #409EFF;-->
<!--            background-color: #263445;-->
<!--            border-bottom: 2px solid #409EFF;-->
<!--        }-->
<!--        .main-content {-->
<!--            flex: 1;-->
<!--            padding: 20px;-->
<!--        }-->
<!--        .card-container {-->
<!--            background: white;-->
<!--            border-radius: 4px;-->
<!--            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--            padding: 20px;-->
<!--            margin-bottom: 20px;-->
<!--        }-->
<!--        .search-bar {-->
<!--            margin-bottom: 20px;-->
<!--            padding: 20px;-->
<!--            background: white;-->
<!--            border-radius: 4px;-->
<!--            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--        }-->
<!--        .pagination-container {-->
<!--            margin-top: 20px;-->
<!--            text-align: right;-->
<!--        }-->
<!--        .status-active {-->
<!--            color: #67C23A;-->
<!--        }-->
<!--        .status-inactive {-->
<!--            color: #909399;-->
<!--        }-->
<!--        .batch-actions {-->
<!--            margin-bottom: 15px;-->
<!--        }-->
<!--        .footer {-->
<!--            text-align: center;-->
<!--            padding: 15px 0;-->
<!--            color: #909399;-->
<!--            font-size: 14px;-->
<!--            background-color: #f5f7fa;-->
<!--            border-top: 1px solid #e6e6e6;-->
<!--        }-->
<!--        .action-buttons {-->
<!--            display: flex;-->
<!--            flex-wrap: wrap;-->
<!--            gap: 5px;-->
<!--        }-->
<!--        .action-buttons .el-button {-->
<!--            margin: 2px;-->
<!--            padding: 5px 8px;-->
<!--            font-size: 12px;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<div id="app" class="app-container">-->
<!--    <header class="header">-->
<!--        <div class="logo-area">-->
<!--            <div class="logo">药</div>-->
<!--            <div class="system-name">药品管理系统</div>-->
<!--        </div>-->
<!--        <div>-->
<!--            <el-dropdown @command="handleUserCommand">-->
<!--                <span class="el-dropdown-link" style="color: white; cursor: pointer;">-->
<!--                    {{ currentUser.username }} ({{ formatRole(currentUser.role) }})<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--                </span>-->
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item command="profile">个人信息</el-dropdown-item>-->
<!--                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--            </el-dropdown>-->
<!--        </div>-->
<!--    </header>-->

<!--    <nav class="nav-menu">-->
<!--        <div class="nav-item" @click="navigateTo('index.html')">首页</div>-->
<!--        <div class="nav-item active">药品管理</div>-->
<!--        <div class="nav-item" @click="navigateTo('inventory.html')">库存管理</div>-->
<!--        <div class="nav-item" @click="navigateTo('sale.html')">销售管理</div>-->
<!--        <div class="nav-item" @click="navigateTo('user.html')" v-if="currentUser.role === 'admin'">用户管理</div>-->
<!--        <div class="nav-item" @click="navigateTo('log.html')" v-if="currentUser.role === 'admin'">操作日志</div>-->
<!--    </nav>-->

<!--    <main class="main-content">-->
<!--        <h2 style="margin-bottom: 20px;">药品管理</h2>-->

<!--        <div class="search-bar">-->
<!--            <el-form :inline="true" :model="searchForm">-->
<!--                <el-form-item label="药品名称">-->
<!--                    <el-input v-model="searchForm.name" placeholder="请输入药品名称" clearable></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="药品分类">-->
<!--                    <el-select v-model="searchForm.category" placeholder="请选择分类" clearable>-->
<!--                        <el-option label="抗生素" value="抗生素"></el-option>-->
<!--                        <el-option label="解热镇痛" value="解热镇痛"></el-option>-->
<!--                        <el-option label="感冒用药" value="感冒用药"></el-option>-->
<!--                        <el-option label="维生素" value="维生素"></el-option>-->
<!--                        <el-option label="消化系统" value="消化系统"></el-option>-->
<!--                        <el-option label="外科用品" value="外科用品"></el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="状态">-->
<!--                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>-->
<!--                        <el-option label="全部" value=""></el-option>-->
<!--                        <el-option label="上架" value="1"></el-option>-->
<!--                        <el-option label="下架" value="0"></el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item>-->
<!--                    <el-button type="primary" @click="handleSearch">查询</el-button>-->
<!--                    <el-button @click="resetSearch">重置</el-button>-->
<!--                    <el-button type="success" @click="handleAdd" v-if="currentUser.role === 'admin'">新增药品</el-button>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
<!--        </div>-->

<!--        <div class="card-container">-->
<!--            <div class="batch-actions" v-if="currentUser.role === 'admin' && selectedMedicines.length > 0">-->
<!--                <el-button size="small" @click="batchUpdateStatus(1)">批量上架</el-button>-->
<!--                <el-button size="small" @click="batchUpdateStatus(0)">批量下架</el-button>-->
<!--                <el-button size="small" type="danger" @click="batchDelete">批量删除</el-button>-->
<!--                <span style="margin-left: 10px;">已选择 {{ selectedMedicines.length }} 项</span>-->
<!--            </div>-->

<!--            <el-table-->
<!--                    :data="medicineList"-->
<!--                    border-->
<!--                    stripe-->
<!--                    v-loading="loading"-->
<!--                    @selection-change="handleSelectionChange">-->
<!--                <el-table-column type="selection" width="55" v-if="currentUser.role === 'admin'"></el-table-column>-->
<!--                <el-table-column prop="code" label="药品编码" width="120"></el-table-column>-->
<!--                <el-table-column prop="name" label="药品名称" min-width="150" show-overflow-tooltip></el-table-column>-->
<!--                <el-table-column prop="category" label="分类" width="100"></el-table-column>-->
<!--                <el-table-column prop="specification" label="规格" width="120"></el-table-column>-->
<!--                <el-table-column prop="manufacturer" label="生产厂家" min-width="150" show-overflow-tooltip></el-table-column>-->
<!--                <el-table-column prop="price" label="价格" width="100">-->
<!--                    <template slot-scope="scope">-->
<!--                        ¥{{ scope.row.price }}-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="状态" width="80">-->
<!--                    <template slot-scope="scope">-->
<!--                        <span :class="{'status-active': scope.row.status === 1, 'status-inactive': scope.row.status === 0}">-->
<!--                            {{ scope.row.status === 1 ? '上架' : '下架' }}-->
<!--                        </span>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column label="操作" width="220" fixed="right">-->
<!--                    <template slot-scope="scope">-->
<!--                        <div class="action-buttons">-->
<!--                            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>-->
<!--                            <el-button-->
<!--                                    size="mini"-->
<!--                                    :type="scope.row.status === 1 ? 'warning' : 'success'"-->
<!--                                    @click="toggleStatus(scope.row)"-->
<!--                                    v-if="currentUser.role === 'admin'">-->
<!--                                {{ scope.row.status === 1 ? '下架' : '上架' }}-->
<!--                            </el-button>-->
<!--                            <el-button-->
<!--                                    size="mini"-->
<!--                                    type="danger"-->
<!--                                    @click="handleDelete(scope.row)"-->
<!--                                    v-if="currentUser.role === 'admin'">删除</el-button>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--            </el-table>-->

<!--            <div class="pagination-container">-->
<!--                <el-pagination-->
<!--                        @size-change="handleSizeChange"-->
<!--                        @current-change="handleCurrentChange"-->
<!--                        :current-page="pagination.currentPage"-->
<!--                        :page-sizes="[10, 20, 50, 100]"-->
<!--                        :page-size="pagination.pageSize"-->
<!--                        layout="total, sizes, prev, pager, next, jumper"-->
<!--                        :total="pagination.total">-->
<!--                </el-pagination>-->
<!--            </div>-->
<!--        </div>-->

<!--        &lt;!&ndash; 添加/编辑药品对话框 &ndash;&gt;-->
<!--        <el-dialog-->
<!--                :title="dialogTitle"-->
<!--                :visible.sync="dialogVisible"-->
<!--                width="600px"-->
<!--                :close-on-click-modal="false">-->
<!--            <el-form :model="medicineForm" :rules="rules" ref="medicineForm" label-width="100px">-->
<!--                <el-form-item label="药品名称" prop="name">-->
<!--                    <el-input v-model="medicineForm.name"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="药品编码" prop="code">-->
<!--                    <el-input v-model="medicineForm.code"-->
<!--                              @blur="checkMedicineCode"-->
<!--                              :disabled="!!medicineForm.id">-->
<!--                        <el-button slot="append" @click="generateMedicineCode" v-if="!medicineForm.id">生成编码</el-button>-->
<!--                    </el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="分类" prop="category">-->
<!--                    <el-select v-model="medicineForm.category" placeholder="请选择分类">-->
<!--                        <el-option label="抗生素" value="抗生素"></el-option>-->
<!--                        <el-option label="解热镇痛" value="解热镇痛"></el-option>-->
<!--                        <el-option label="感冒用药" value="感冒用药"></el-option>-->
<!--                        <el-option label="维生素" value="维生素"></el-option>-->
<!--                        <el-option label="消化系统" value="消化系统"></el-option>-->
<!--                        <el-option label="外科用品" value="外科用品"></el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="规格" prop="specification">-->
<!--                    <el-input v-model="medicineForm.specification"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="生产厂家" prop="manufacturer">-->
<!--                    <el-input v-model="medicineForm.manufacturer"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="价格" prop="price">-->
<!--                    <el-input-number v-model="medicineForm.price" :min="0" :precision="2" style="width: 100%;"></el-input-number>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="状态" prop="status" v-if="currentUser.role === 'admin'">-->
<!--                    <el-radio-group v-model="medicineForm.status">-->
<!--                        <el-radio :label="1">上架</el-radio>-->
<!--                        <el-radio :label="0">下架</el-radio>-->
<!--                    </el-radio-group>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="描述" prop="description">-->
<!--                    <el-input type="textarea" v-model="medicineForm.description" :rows="3"></el-input>-->
<!--                </el-form-item>-->
<!--            </el-form>-->
<!--            <span slot="footer" class="dialog-footer">-->
<!--                <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--                <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--            </span>-->
<!--        </el-dialog>-->
<!--    </main>-->

<!--    <footer class="footer">© 2023 药品管理系统 - 版权所有</footer>-->
<!--</div>-->

<!--<script>-->
<!--    new Vue({-->
<!--        el: '#app',-->
<!--        data() {-->
<!--            return {-->
<!--                activeNav: 'medicine',-->
<!--                currentUser: { id: null, username: '', role: '' },-->
<!--                searchForm: {-->
<!--                    name: '',-->
<!--                    category: '',-->
<!--                    status: ''-->
<!--                },-->
<!--                medicineList: [],-->
<!--                selectedMedicines: [],-->
<!--                loading: false,-->
<!--                pagination: {-->
<!--                    currentPage: 1,-->
<!--                    pageSize: 10,-->
<!--                    total: 0-->
<!--                },-->
<!--                dialogVisible: false,-->
<!--                dialogTitle: '新增药品',-->
<!--                medicineForm: {-->
<!--                    id: '',-->
<!--                    name: '',-->
<!--                    code: '',-->
<!--                    category: '',-->
<!--                    specification: '',-->
<!--                    manufacturer: '',-->
<!--                    price: 0,-->
<!--                    status: 1,-->
<!--                    description: ''-->
<!--                },-->
<!--                rules: {-->
<!--                    name: [{ required: true, message: '请输入药品名称', trigger: 'blur' }],-->
<!--                    code: [{ required: true, message: '请输入药品编码', trigger: 'blur' }],-->
<!--                    category: [{ required: true, message: '请选择分类', trigger: 'change' }],-->
<!--                    price: [{ required: true, message: '请输入价格', trigger: 'blur' }]-->
<!--                }-->
<!--            };-->
<!--        },-->
<!--        mounted() {-->
<!--            this.loadCurrentUser();-->
<!--            this.loadMedicineList();-->
<!--        },-->
<!--        methods: {-->
<!--            loadCurrentUser() {-->
<!--                const savedUser = localStorage.getItem('currentUser');-->
<!--                if (savedUser) {-->
<!--                    this.currentUser = JSON.parse(savedUser);-->
<!--                } else {-->
<!--                    axios.get('/pms/user/current').then(response => {-->
<!--                        if (response.data.success) {-->
<!--                            this.currentUser = response.data.data;-->
<!--                            localStorage.setItem('currentUser', JSON.stringify(response.data.data));-->
<!--                        } else {-->
<!--                            window.location.href = 'login.html';-->
<!--                        }-->
<!--                    }).catch(() => {-->
<!--                        window.location.href = 'login.html';-->
<!--                    });-->
<!--                }-->
<!--            },-->

<!--            loadMedicineList() {-->
<!--                this.loading = true;-->

<!--                // 由于Controller不支持分页参数，我们前端实现过滤-->
<!--                axios.get('/pms/medicine/list').then(response => {-->
<!--                    console.log('药品列表响应:', response.data);-->
<!--                    if (response.data.success) {-->
<!--                        let allMedicines = response.data.data;-->

<!--                        // 前端过滤逻辑-->
<!--                        let filteredMedicines = allMedicines.filter(medicine => {-->
<!--                            let match = true;-->

<!--                            // 按名称过滤-->
<!--                            if (this.searchForm.name && !medicine.name.includes(this.searchForm.name)) {-->
<!--                                match = false;-->
<!--                            }-->

<!--                            // 按分类过滤-->
<!--                            if (this.searchForm.category && medicine.category !== this.searchForm.category) {-->
<!--                                match = false;-->
<!--                            }-->

<!--                            // 按状态过滤 - 修正后的代码-->
<!--                            if (this.searchForm.status !== '' && medicine.status.toString() !== this.searchForm.status) {-->
<!--                                match = false;-->
<!--                            }-->

<!--                            return match;-->
<!--                        });-->

<!--                        // 前端分页逻辑-->
<!--                        const start = (this.pagination.currentPage - 1) * this.pagination.pageSize;-->
<!--                        const end = start + this.pagination.pageSize;-->
<!--                        this.medicineList = filteredMedicines.slice(start, end);-->
<!--                        this.pagination.total = filteredMedicines.length;-->
<!--                    } else {-->
<!--                        this.$message.error(response.data.message);-->
<!--                        if (response.data.message === '用户未登录') {-->
<!--                            window.location.href = 'login.html';-->
<!--                        }-->
<!--                    }-->
<!--                    this.loading = false;-->
<!--                }).catch(error => {-->
<!--                    console.error('获取药品列表失败:', error);-->
<!--                    this.$message.error('获取药品列表失败');-->
<!--                    this.loading = false;-->
<!--                });-->
<!--            },-->

<!--            handleSearch() {-->
<!--                this.pagination.currentPage = 1;-->
<!--                this.loadMedicineList();-->
<!--            },-->

<!--            resetSearch() {-->
<!--                this.searchForm = {-->
<!--                    name: '',-->
<!--                    category: '',-->
<!--                    status: ''-->
<!--                };-->
<!--                this.pagination.currentPage = 1;-->
<!--                this.loadMedicineList();-->
<!--            },-->

<!--            handleSizeChange(size) {-->
<!--                this.pagination.pageSize = size;-->
<!--                this.pagination.currentPage = 1;-->
<!--                this.loadMedicineList();-->
<!--            },-->

<!--            handleCurrentChange(page) {-->
<!--                this.pagination.currentPage = page;-->
<!--                this.loadMedicineList();-->
<!--            },-->

<!--            handleSelectionChange(selection) {-->
<!--                this.selectedMedicines = selection;-->
<!--            },-->

<!--            handleAdd() {-->
<!--                this.dialogTitle = '新增药品';-->
<!--                this.medicineForm = {-->
<!--                    id: '',-->
<!--                    name: '',-->
<!--                    code: '',-->
<!--                    category: '',-->
<!--                    specification: '',-->
<!--                    manufacturer: '',-->
<!--                    price: 0,-->
<!--                    status: 1,-->
<!--                    description: ''-->
<!--                };-->
<!--                this.dialogVisible = true;-->

<!--                if (this.$refs.medicineForm) {-->
<!--                    this.$refs.medicineForm.clearValidate();-->
<!--                }-->
<!--            },-->

<!--            handleEdit(row) {-->
<!--                this.dialogTitle = '编辑药品';-->
<!--                this.medicineForm = { ...row };-->
<!--                this.dialogVisible = true;-->

<!--                if (this.$refs.medicineForm) {-->
<!--                    this.$refs.medicineForm.clearValidate();-->
<!--                }-->
<!--            },-->

<!--            checkMedicineCode() {-->
<!--                if (!this.medicineForm.code) return;-->

<!--                axios.get('/pms/medicine/checkCode', {-->
<!--                    params: { code: this.medicineForm.code }-->
<!--                }).then(response => {-->
<!--                    if (response.data.success && response.data.exists && !this.medicineForm.id) {-->
<!--                        this.$message.warning('药品编码已存在，请重新输入');-->
<!--                        this.medicineForm.code = '';-->
<!--                    }-->
<!--                }).catch(error => {-->
<!--                    console.error('检查药品编码失败:', error);-->
<!--                });-->
<!--            },-->

<!--            generateMedicineCode() {-->
<!--                // 生成随机药品编码-->
<!--                const randomCode = 'MED' + Math.floor(1000 + Math.random() * 9000);-->
<!--                this.medicineForm.code = randomCode;-->
<!--            },-->

<!--            submitForm() {-->
<!--                this.$refs.medicineForm.validate(valid => {-->
<!--                    if (valid) {-->
<!--                        if (this.medicineForm.id) {-->
<!--                            // 更新药品-->
<!--                            axios.put('/pms/medicine/update', this.medicineForm).then(response => {-->
<!--                                if (response.data.success) {-->
<!--                                    this.$message.success(response.data.message);-->
<!--                                    this.dialogVisible = false;-->
<!--                                    this.loadMedicineList();-->
<!--                                } else {-->
<!--                                    this.$message.error(response.data.message);-->
<!--                                }-->
<!--                            }).catch(error => {-->
<!--                                console.error('更新药品失败:', error);-->
<!--                                this.$message.error('更新药品失败');-->
<!--                            });-->
<!--                        } else {-->
<!--                            // 添加药品-->
<!--                            axios.post('/pms/medicine/add', this.medicineForm).then(response => {-->
<!--                                if (response.data.success) {-->
<!--                                    this.$message.success(response.data.message);-->
<!--                                    this.dialogVisible = false;-->
<!--                                    this.loadMedicineList();-->
<!--                                } else {-->
<!--                                    this.$message.error(response.data.message);-->
<!--                                }-->
<!--                            }).catch(error => {-->
<!--                                console.error('添加药品失败:', error);-->
<!--                                this.$message.error('添加药品失败');-->
<!--                            });-->
<!--                        }-->
<!--                    } else {-->
<!--                        return false;-->
<!--                    }-->
<!--                });-->
<!--            },-->

<!--            toggleStatus(row) {-->
<!--                const newStatus = row.status === 1 ? 0 : 1;-->
<!--                const action = newStatus === 1 ? '上架' : '下架';-->

<!--                this.$confirm(`确定要${action}该药品吗?`, '提示', {-->
<!--                    confirmButtonText: '确定',-->
<!--                    cancelButtonText: '取消',-->
<!--                    type: 'warning'-->
<!--                }).then(() => {-->
<!--                    const updatedMedicine = {-->
<!--                        id: row.id,-->
<!--                        name: row.name,-->
<!--                        code: row.code,-->
<!--                        category: row.category,-->
<!--                        specification: row.specification,-->
<!--                        manufacturer: row.manufacturer,-->
<!--                        price: row.price,-->
<!--                        status: newStatus,-->
<!--                        description: row.description-->
<!--                    };-->

<!--                    axios.put('/pms/medicine/update', updatedMedicine).then(response => {-->
<!--                        if (response.data.success) {-->
<!--                            this.$message.success(response.data.message);-->
<!--                            this.loadMedicineList();-->
<!--                        } else {-->
<!--                            this.$message.error(response.data.message);-->
<!--                        }-->
<!--                    }).catch(error => {-->
<!--                        console.error('更新状态失败:', error);-->
<!--                        this.$message.error('更新状态失败');-->
<!--                    });-->
<!--                }).catch(() => {});-->
<!--            },-->

<!--            handleDelete(row) {-->
<!--                this.$confirm('确定要删除该药品吗?', '提示', {-->
<!--                    confirmButtonText: '确定',-->
<!--                    cancelButtonText: '取消',-->
<!--                    type: 'warning'-->
<!--                }).then(() => {-->
<!--                    axios.delete(`/pms/medicine/delete/${row.id}`).then(response => {-->
<!--                        if (response.data.success) {-->
<!--                            this.$message.success(response.data.message);-->
<!--                            this.loadMedicineList();-->
<!--                        } else {-->
<!--                            this.$message.error(response.data.message);-->
<!--                        }-->
<!--                    }).catch(error => {-->
<!--                        console.error('删除药品失败:', error);-->
<!--                        this.$message.error('删除药品失败');-->
<!--                    });-->
<!--                }).catch(() => {});-->
<!--            },-->

<!--            batchUpdateStatus(status) {-->
<!--                if (this.selectedMedicines.length === 0) {-->
<!--                    this.$message.warning('请选择要操作的药品');-->
<!--                    return;-->
<!--                }-->

<!--                const action = status === 1 ? '上架' : '下架';-->

<!--                this.$confirm(`确定要${action}选中的${this.selectedMedicines.length}个药品吗?`, '提示', {-->
<!--                    confirmButtonText: '确定',-->
<!--                    cancelButtonText: '取消',-->
<!--                    type: 'warning'-->
<!--                }).then(() => {-->
<!--                    const requests = this.selectedMedicines.map(medicine => {-->
<!--                        const updatedMedicine = {-->
<!--                            ...medicine,-->
<!--                            status: status-->
<!--                        };-->
<!--                        return axios.put('/pms/medicine/update', updatedMedicine);-->
<!--                    });-->

<!--                    Promise.all(requests).then(responses => {-->
<!--                        const allSuccess = responses.every(response => response.data.success);-->
<!--                        if (allSuccess) {-->
<!--                            this.$message.success(`批量${action}成功`);-->
<!--                            this.selectedMedicines = [];-->
<!--                            this.loadMedicineList();-->
<!--                        } else {-->
<!--                            this.$message.error('部分操作失败');-->
<!--                        }-->
<!--                    }).catch(error => {-->
<!--                        console.error('批量操作失败:', error);-->
<!--                        this.$message.error('批量操作失败');-->
<!--                    });-->
<!--                }).catch(() => {});-->
<!--            },-->

<!--            batchDelete() {-->
<!--                if (this.selectedMedicines.length === 0) {-->
<!--                    this.$message.warning('请选择要删除的药品');-->
<!--                    return;-->
<!--                }-->

<!--                this.$confirm(`确定要删除选中的${this.selectedMedicines.length}个药品吗?`, '提示', {-->
<!--                    confirmButtonText: '确定',-->
<!--                    cancelButtonText: '取消',-->
<!--                    type: 'warning'-->
<!--                }).then(() => {-->
<!--                    const requests = this.selectedMedicines.map(medicine => {-->
<!--                        return axios.delete(`/pms/medicine/delete/${medicine.id}`);-->
<!--                    });-->

<!--                    Promise.all(requests).then(responses => {-->
<!--                        const allSuccess = responses.every(response => response.data.success);-->
<!--                        if (allSuccess) {-->
<!--                            this.$message.success('批量删除成功');-->
<!--                            this.selectedMedicines = [];-->
<!--                            this.loadMedicineList();-->
<!--                        } else {-->
<!--                            this.$message.error('部分删除失败');-->
<!--                        }-->
<!--                    }).catch(error => {-->
<!--                        console.error('批量删除失败:', error);-->
<!--                        this.$message.error('批量删除失败');-->
<!--                    });-->
<!--                }).catch(() => {});-->
<!--            },-->

<!--            navigateTo(url) {-->
<!--                window.location.href = url;-->
<!--            },-->

<!--            handleUserCommand(command) {-->
<!--                if (command === 'profile') {-->
<!--                    window.location.href = 'profile.html';-->
<!--                } else if (command === 'logout') {-->
<!--                    this.handleLogout();-->
<!--                }-->
<!--            },-->

<!--            handleLogout() {-->
<!--                axios.post('/pms/user/logout').then(response => {-->
<!--                    if (response.data.success) {-->
<!--                        this.$message.success(response.data.message);-->
<!--                        localStorage.removeItem('currentUser');-->
<!--                        window.location.href = 'login.html';-->
<!--                    }-->
<!--                }).catch(error => {-->
<!--                    console.error('退出登录失败:', error);-->
<!--                });-->
<!--            },-->

<!--            formatRole(role) {-->
<!--                const roleMap = { 'admin': '管理员', 'sales': '销售员', 'inventory': '库存管理员' };-->
<!--                return roleMap[role] || role;-->
<!--            }-->
<!--        }-->
<!--    });-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>药品管理系统 - 药品管理</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            background-color: #f5f7fa;
            color: #606266;
        }
        .app-container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .logo-area {
            display: flex;
            align-items: center;
        }
        .logo {
            width: 50px;
            height: 50px;
            margin-right: 15px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
        }
        .system-name {
            font-size: 22px;
            font-weight: bold;
        }
        .nav-menu {
            display: flex;
            background-color: #304156;
            padding: 0 20px;
        }
        .nav-item {
            padding: 15px 20px;
            color: #bfcbd9;
            cursor: pointer;
            transition: all 0.3s;
        }
        .nav-item:hover, .nav-item.active {
            color: #409EFF;
            background-color: #263445;
            border-bottom: 2px solid #409EFF;
        }
        .main-content {
            flex: 1;
            padding: 20px;
        }
        .card-container {
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .search-bar {
            margin-bottom: 20px;
            padding: 20px;
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .pagination-container {
            margin-top: 20px;
            text-align: right;
        }
        .status-active {
            color: #67C23A;
        }
        .status-inactive {
            color: #F56C6C;
        }
        .batch-actions {
            margin-bottom: 15px;
        }
        .footer {
            text-align: center;
            padding: 15px 0;
            color: #909399;
            font-size: 14px;
            background-color: #f5f7fa;
            border-top: 1px solid #e6e6e6;
        }
        .action-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }
        .action-buttons .el-button {
            margin: 2px;
            padding: 5px 8px;
            font-size: 12px;
        }
        .status-filter {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .status-filter span {
            margin-right: 10px;
            font-weight: bold;
        }
        .highlight-inactive {
            background-color: #fef0f0;
        }
    </style>
</head>
<body>
<div id="app" class="app-container">
    <header class="header">
        <div class="logo-area">
            <div class="logo">药</div>
            <div class="system-name">药品管理系统</div>
        </div>
        <div>
            <el-dropdown @command="handleUserCommand">
                <span class="el-dropdown-link" style="color: white; cursor: pointer;">
                    {{ currentUser.username }} ({{ formatRole(currentUser.role) }})<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </header>

    <nav class="nav-menu">
        <div class="nav-item" @click="navigateTo('index.html')">首页</div>
        <div class="nav-item active">药品管理</div>
        <div class="nav-item" @click="navigateTo('inventory.html')">库存管理</div>
        <div class="nav-item" @click="navigateTo('sale.html')">销售管理</div>
        <div class="nav-item" @click="navigateTo('user.html')" v-if="currentUser.role === 'admin'">用户管理</div>
        <div class="nav-item" @click="navigateTo('log.html')" v-if="currentUser.role === 'admin'">操作日志</div>
    </nav>

    <main class="main-content">
        <h2 style="margin-bottom: 20px;">药品管理</h2>

        <div class="search-bar">
            <el-form :inline="true" :model="searchForm">
                <el-form-item label="药品名称">
                    <el-input v-model="searchForm.name" placeholder="请输入药品名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="药品分类">
                    <el-select v-model="searchForm.category" placeholder="请选择分类" clearable>
                        <el-option label="抗生素" value="抗生素"></el-option>
                        <el-option label="解热镇痛" value="解热镇痛"></el-option>
                        <el-option label="感冒用药" value="感冒用药"></el-option>
                        <el-option label="维生素" value="维生素"></el-option>
                        <el-option label="消化系统" value="消化系统"></el-option>
                        <el-option label="外科用品" value="外科用品"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
                        <el-option label="全部" value=""></el-option>
                        <el-option label="上架" value="1"></el-option>
                        <el-option label="下架" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">查询</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                    <el-button type="success" @click="handleAdd" v-if="currentUser.role === 'admin'">新增药品</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="card-container">
            <div class="status-filter">
                <span>状态筛选:</span>
                <el-radio-group v-model="showInactive" @change="filterByStatus">
                    <el-radio-button :label="true">显示下架药品</el-radio-button>
                    <el-radio-button :label="false">隐藏下架药品</el-radio-button>
                </el-radio-group>
            </div>

            <div class="batch-actions" v-if="currentUser.role === 'admin' && selectedMedicines.length > 0">
                <el-button size="small" @click="batchUpdateStatus(1)">批量上架</el-button>
                <el-button size="small" @click="batchUpdateStatus(0)">批量下架</el-button>
                <el-button size="small" type="danger" @click="batchDelete">批量删除</el-button>
                <span style="margin-left: 10px;">已选择 {{ selectedMedicines.length }} 项</span>
            </div>

            <el-table
                    :data="filteredMedicineList"
                    border
                    stripe
                    v-loading="loading"
                    @selection-change="handleSelectionChange"
                    :row-class-name="tableRowClassName">
                <el-table-column type="selection" width="55" v-if="currentUser.role === 'admin'"></el-table-column>
                <el-table-column prop="code" label="药品编码" width="120"></el-table-column>
                <el-table-column prop="name" label="药品名称" min-width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="category" label="分类" width="100"></el-table-column>
                <el-table-column prop="specification" label="规格" width="120"></el-table-column>
                <el-table-column prop="manufacturer" label="生产厂家" min-width="150" show-overflow-tooltip></el-table-column>
                <el-table-column prop="price" label="价格" width="100">
                    <template slot-scope="scope">
                        ¥{{ scope.row.price }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="80">
                    <template slot-scope="scope">
                        <span :class="{'status-active': scope.row.status === 1, 'status-inactive': scope.row.status === 0}">
                            {{ scope.row.status === 1 ? '上架' : '下架' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="220" fixed="right">
                    <template slot-scope="scope">
                        <div class="action-buttons">
                            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    :type="scope.row.status === 1 ? 'warning' : 'success'"
                                    @click="toggleStatus(scope.row)"
                                    v-if="currentUser.role === 'admin'">
                                {{ scope.row.status === 1 ? '下架' : '上架' }}
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.row)"
                                    v-if="currentUser.role === 'admin'">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination-container">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pagination.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>

        <!-- 添加/编辑药品对话框 -->
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="600px"
                :close-on-click-modal="false">
            <el-form :model="medicineForm" :rules="rules" ref="medicineForm" label-width="100px">
                <el-form-item label="药品名称" prop="name">
                    <el-input v-model="medicineForm.name"></el-input>
                </el-form-item>
                <el-form-item label="药品编码" prop="code">
                    <el-input v-model="medicineForm.code"
                              @blur="checkMedicineCode"
                              :disabled="!!medicineForm.id">
                        <el-button slot="append" @click="generateMedicineCode" v-if="!medicineForm.id">生成编码</el-button>
                    </el-input>
                </el-form-item>
                <el-form-item label="分类" prop="category">
                    <el-select v-model="medicineForm.category" placeholder="请选择分类">
                        <el-option label="抗生素" value="抗生素"></el-option>
                        <el-option label="解热镇痛" value="解热镇痛"></el-option>
                        <el-option label="感冒用药" value="感冒用药"></el-option>
                        <el-option label="维生素" value="维生素"></el-option>
                        <el-option label="消化系统" value="消化系统"></el-option>
                        <el-option label="外科用品" value="外科用品"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="规格" prop="specification">
                    <el-input v-model="medicineForm.specification"></el-input>
                </el-form-item>
                <el-form-item label="生产厂家" prop="manufacturer">
                    <el-input v-model="medicineForm.manufacturer"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input-number v-model="medicineForm.price" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                </el-form-item>
                <el-form-item label="状态" prop="status" v-if="currentUser.role === 'admin'">
                    <el-radio-group v-model="medicineForm.status">
                        <el-radio :label="1">上架</el-radio>
                        <el-radio :label="0">下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input type="textarea" v-model="medicineForm.description" :rows="3"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </main>

    <footer class="footer">© 2023 药品管理系统 - 版权所有</footer>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeNav: 'medicine',
                currentUser: { id: null, username: '', role: '' },
                searchForm: {
                    name: '',
                    category: '',
                    status: ''
                },
                medicineList: [],
                selectedMedicines: [],
                loading: false,
                pagination: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
                dialogVisible: false,
                dialogTitle: '新增药品',
                medicineForm: {
                    id: '',
                    name: '',
                    code: '',
                    category: '',
                    specification: '',
                    manufacturer: '',
                    price: 0,
                    status: 1,
                    description: ''
                },
                rules: {
                    name: [{ required: true, message: '请输入药品名称', trigger: 'blur' }],
                    code: [{ required: true, message: '请输入药品编码', trigger: 'blur' }],
                    category: [{ required: true, message: '请选择分类', trigger: 'change' }],
                    price: [{ required: true, message: '请输入价格', trigger: 'blur' }]
                },
                showInactive: true, // 控制是否显示下架药品
                allMedicines: [] // 存储所有药品数据
            };
        },
        computed: {
            // 根据筛选条件过滤药品列表
            filteredMedicineList() {
                let filtered = this.medicineList;

                // 根据是否显示下架药品进行筛选
                if (!this.showInactive) {
                    filtered = filtered.filter(medicine => medicine.status === 1);
                }

                return filtered;
            }
        },
        mounted() {
            this.loadCurrentUser();
            this.loadMedicineList();
        },
        methods: {
            loadCurrentUser() {
                const savedUser = localStorage.getItem('currentUser');
                if (savedUser) {
                    this.currentUser = JSON.parse(savedUser);
                } else {
                    axios.get('/pms/user/current').then(response => {
                        if (response.data.success) {
                            this.currentUser = response.data.data;
                            localStorage.setItem('currentUser', JSON.stringify(response.data.data));
                        } else {
                            window.location.href = 'login.html';
                        }
                    }).catch(() => {
                        window.location.href = 'login.html';
                    });
                }
            },

            loadMedicineList() {
                this.loading = true;

                // 获取所有药品数据
                axios.get('/pms/medicine/list').then(response => {
                    console.log('药品列表响应:', response.data);
                    if (response.data.success) {
                        this.allMedicines = response.data.data;
                        this.applyFilters();
                    } else {
                        this.$message.error(response.data.message);
                        if (response.data.message === '用户未登录') {
                            window.location.href = 'login.html';
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    console.error('获取药品列表失败:', error);
                    this.$message.error('获取药品列表失败');
                    this.loading = false;
                });
            },

            applyFilters() {
                // 应用所有筛选条件
                let filteredMedicines = this.allMedicines.filter(medicine => {
                    let match = true;

                    // 按名称过滤
                    if (this.searchForm.name && !medicine.name.includes(this.searchForm.name)) {
                        match = false;
                    }

                    // 按分类过滤
                    if (this.searchForm.category && medicine.category !== this.searchForm.category) {
                        match = false;
                    }

                    // 按状态过滤 - 修正后的代码
                    if (this.searchForm.status !== '' && medicine.status.toString() !== this.searchForm.status) {
                        match = false;
                    }

                    return match;
                });

                // 前端分页逻辑
                const start = (this.pagination.currentPage - 1) * this.pagination.pageSize;
                const end = start + this.pagination.pageSize;
                this.medicineList = filteredMedicines.slice(start, end);
                this.pagination.total = filteredMedicines.length;
            },

            handleSearch() {
                this.pagination.currentPage = 1;
                this.applyFilters();
            },

            resetSearch() {
                this.searchForm = {
                    name: '',
                    category: '',
                    status: ''
                };
                this.pagination.currentPage = 1;
                this.applyFilters();
            },

            filterByStatus() {
                // 状态筛选改变时重新应用筛选
                this.applyFilters();
            },

            handleSizeChange(size) {
                this.pagination.pageSize = size;
                this.pagination.currentPage = 1;
                this.applyFilters();
            },

            handleCurrentChange(page) {
                this.pagination.currentPage = page;
                this.applyFilters();
            },

            handleSelectionChange(selection) {
                this.selectedMedicines = selection;
            },

            tableRowClassName({row}) {
                // 为下架药品添加特殊样式
                return row.status === 0 ? 'highlight-inactive' : '';
            },

            handleAdd() {
                this.dialogTitle = '新增药品';
                this.medicineForm = {
                    id: '',
                    name: '',
                    code: '',
                    category: '',
                    specification: '',
                    manufacturer: '',
                    price: 0,
                    status: 1,
                    description: ''
                };
                this.dialogVisible = true;

                if (this.$refs.medicineForm) {
                    this.$refs.medicineForm.clearValidate();
                }
            },

            handleEdit(row) {
                this.dialogTitle = '编辑药品';
                this.medicineForm = { ...row };
                this.dialogVisible = true;

                if (this.$refs.medicineForm) {
                    this.$refs.medicineForm.clearValidate();
                }
            },

            checkMedicineCode() {
                if (!this.medicineForm.code) return;

                axios.get('/pms/medicine/checkCode', {
                    params: { code: this.medicineForm.code }
                }).then(response => {
                    if (response.data.success && response.data.exists && !this.medicineForm.id) {
                        this.$message.warning('药品编码已存在，请重新输入');
                        this.medicineForm.code = '';
                    }
                }).catch(error => {
                    console.error('检查药品编码失败:', error);
                });
            },

            generateMedicineCode() {
                // 生成随机药品编码
                const randomCode = 'MED' + Math.floor(1000 + Math.random() * 9000);
                this.medicineForm.code = randomCode;
            },

            submitForm() {
                this.$refs.medicineForm.validate(valid => {
                    if (valid) {
                        if (this.medicineForm.id) {
                            // 更新药品
                            axios.put('/pms/medicine/update', this.medicineForm).then(response => {
                                if (response.data.success) {
                                    this.$message.success(response.data.message);
                                    this.dialogVisible = false;
                                    this.loadMedicineList(); // 重新加载数据
                                } else {
                                    this.$message.error(response.data.message);
                                }
                            }).catch(error => {
                                console.error('更新药品失败:', error);
                                this.$message.error('更新药品失败');
                            });
                        } else {
                            // 添加药品
                            axios.post('/pms/medicine/add', this.medicineForm).then(response => {
                                if (response.data.success) {
                                    this.$message.success(response.data.message);
                                    this.dialogVisible = false;
                                    this.loadMedicineList(); // 重新加载数据
                                } else {
                                    this.$message.error(response.data.message);
                                }
                            }).catch(error => {
                                console.error('添加药品失败:', error);
                                this.$message.error('添加药品失败');
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },

            toggleStatus(row) {
                const newStatus = row.status === 1 ? 0 : 1;
                const action = newStatus === 1 ? '上架' : '下架';

                this.$confirm(`确定要${action}该药品吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const updatedMedicine = {
                        id: row.id,
                        name: row.name,
                        code: row.code,
                        category: row.category,
                        specification: row.specification,
                        manufacturer: row.manufacturer,
                        price: row.price,
                        status: newStatus,
                        description: row.description
                    };

                    axios.put('/pms/medicine/update', updatedMedicine).then(response => {
                        if (response.data.success) {
                            this.$message.success(response.data.message);
                            this.loadMedicineList(); // 重新加载数据
                        } else {
                            this.$message.error(response.data.message);
                        }
                    }).catch(error => {
                        console.error('更新状态失败:', error);
                        this.$message.error('更新状态失败');
                    });
                }).catch(() => {});
            },

            handleDelete(row) {
                this.$confirm('确定要删除该药品吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(`/pms/medicine/delete/${row.id}`).then(response => {
                        if (response.data.success) {
                            this.$message.success(response.data.message);
                            this.loadMedicineList(); // 重新加载数据
                        } else {
                            this.$message.error(response.data.message);
                        }
                    }).catch(error => {
                        console.error('删除药品失败:', error);
                        this.$message.error('删除药品失败');
                    });
                }).catch(() => {});
            },

            batchUpdateStatus(status) {
                if (this.selectedMedicines.length === 0) {
                    this.$message.warning('请选择要操作的药品');
                    return;
                }

                const action = status === 1 ? '上架' : '下架';

                this.$confirm(`确定要${action}选中的${this.selectedMedicines.length}个药品吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const requests = this.selectedMedicines.map(medicine => {
                        const updatedMedicine = {
                            ...medicine,
                            status: status
                        };
                        return axios.put('/pms/medicine/update', updatedMedicine);
                    });

                    Promise.all(requests).then(responses => {
                        const allSuccess = responses.every(response => response.data.success);
                        if (allSuccess) {
                            this.$message.success(`批量${action}成功`);
                            this.selectedMedicines = [];
                            this.loadMedicineList(); // 重新加载数据
                        } else {
                            this.$message.error('部分操作失败');
                        }
                    }).catch(error => {
                        console.error('批量操作失败:', error);
                        this.$message.error('批量操作失败');
                    });
                }).catch(() => {});
            },

            batchDelete() {
                if (this.selectedMedicines.length === 0) {
                    this.$message.warning('请选择要删除的药品');
                    return;
                }

                this.$confirm(`确定要删除选中的${this.selectedMedicines.length}个药品吗?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const requests = this.selectedMedicines.map(medicine => {
                        return axios.delete(`/pms/medicine/delete/${medicine.id}`);
                    });

                    Promise.all(requests).then(responses => {
                        const allSuccess = responses.every(response => response.data.success);
                        if (allSuccess) {
                            this.$message.success('批量删除成功');
                            this.selectedMedicines = [];
                            this.loadMedicineList(); // 重新加载数据
                        } else {
                            this.$message.error('部分删除失败');
                        }
                    }).catch(error => {
                        console.error('批量删除失败:', error);
                        this.$message.error('批量删除失败');
                    });
                }).catch(() => {});
            },

            navigateTo(url) {
                window.location.href = url;
            },

            handleUserCommand(command) {
                if (command === 'profile') {
                    window.location.href = 'profile.html';
                } else if (command === 'logout') {
                    this.handleLogout();
                }
            },

            handleLogout() {
                axios.post('/pms/user/logout').then(response => {
                    if (response.data.success) {
                        this.$message.success(response.data.message);
                        localStorage.removeItem('currentUser');
                        window.location.href = 'login.html';
                    }
                }).catch(error => {
                    console.error('退出登录失败:', error);
                });
            },

            formatRole(role) {
                const roleMap = { 'admin': '管理员', 'sales': '销售员', 'inventory': '库存管理员' };
                return roleMap[role] || role;
            }
        }
    });
</script>
</body>
</html>